<template>
	<div class="home2_top">
		<div :class="['home2_top_item', 'home2_top_item' + index]" v-for="(item, index) in state.topList" :key="index">
			<img :src="state.showIcon[index]" alt="" />
			<div>
				<div class="name">{{ item.showName }}</div>
				<div class="value">
					{{ item.showValue }}<span>{{ item.showUnit }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup name="personalUserPage">
import icon1 from '@/assets/img/home2/icon_1.svg';
import icon2 from '@/assets/img/home2/icon_2.svg';
import icon3 from '@/assets/img/home2/icon_3.svg';
import icon4 from '@/assets/img/home2/icon_4.svg';
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------

const state = reactive({
	showIcon: [icon1, icon2, icon3, icon4] as any,
	topList: [] as any,
});
//------------------定义调用方法-------------------------
const init = () => {
	$api.common.send.post('user0041', {}).then((res) => {
		state.topList = res.result;
	});
};
//-------------------------初始化-----------------------------
onMounted(() => {
	nextTick(() => {
		init();
	});
});
</script>
<style scoped lang="scss">
.icon {
	width: 3em;
	height: 3em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
.home2 {
	&_top {
		width: calc(100% - 48px) !important;
		margin: 10px 24px 12px;
		display: flex;
		background: #ffffff;
		box-shadow: 0px 4px 10px 0px rgba(0, 34, 98, 0.05);
		border-radius: 4px;

		&_item {
			height: 120px;
			line-height: 32px;
			padding-left: 60px;
			display: flex;
			align-items: center;
			flex: 1;
			font-family: PingFangSC-Medium;
			font-size: 18px;
			color: #333333;
			letter-spacing: 0;
			font-weight: 500;

			+ .home2_top_item {
				margin-left: 20px;
			}

			img {
				width: 60px;
				height: 60px;
				margin-right: 28px;
			}

			.value {
				font-family: DINPro-Medium;
				font-size: 24px;
				color: rgba(26, 71, 153, 0.8);
				letter-spacing: 0;
				font-weight: 500;
			}

			&0 {
				.name {
					font-size: 22px;
					color: #012973;
				}

				.value {
					font-family: PingFangSC-Regular;
					color: rgba(102, 102, 102, 0.85);
					letter-spacing: 0;
					font-weight: 400;
					font-size: 18px;
				}
			}

			&1 {
				.value {
					font-size: 20px;
				}

				span {
					margin-left: 10px;
					color: #1a4799;
					font-size: 18px;
				}
			}

			&2 {
				.value {
					span {
						margin-left: 10px;
						font-family: PingFangSC-Regular;
						font-size: 18px;
						color: rgba(119, 119, 119, 0.85);
						font-weight: 400;
					}
				}
			}

			&3 {
				.value {
					font-size: 20px;
				}
			}
		}
	}
}
@media screen and (min-width: 1500px) and (max-width: 1800px) {
	.home2_top_item {
		padding-left: 14px;

		+ .home2_top_item {
			margin-left: 0;
		}
	}
	.home2_cygn_con_item {
		height: 9.2rem;
		line-height: 9.2rem;
	}
	.home2_zxzx_con_item {
		width: 47.6%;
	}
}

// @media screen and (min-width: 1200px) and (max-width: 1500px) {
@media (max-width: 1500px) {
	.home2_top {
		flex-wrap: wrap;
	}
	.home2_top_item {
		padding-left: 14px;

		+ .home2_top_item {
			margin-left: 0;
		}

		img {
			margin-right: 15px;
		}
	}
	.home2_top_item0,
	.home2_top_item1,
	.home2_top_item2,
	.home2_top_item3 {
		.name {
			font-size: 18px;
		}

		.value {
			font-size: 16px;
		}
	}
	.home2_top_item1,
	.home2_top_item3 {
		width: 27.5%;
		flex: none;
	}
	.home2_cygn_con_item {
		height: 9.2rem;
		line-height: 9.2rem;
	}
	.home2_zxzx_con_item {
		width: 46%;
		padding: 10px 20px;
	}
	.home2_wddb_con_item {
		width: 20rem;
	}
	.home2_zxzx {
		width: calc(100% - 328px);
	}
}
</style>
